diff options
Diffstat (limited to 'src/routes/[lang=lang]/sections')
| -rw-r--r-- | src/routes/[lang=lang]/sections/contact.svelte | 69 | ||||
| -rw-r--r-- | src/routes/[lang=lang]/sections/description.svelte | 26 | ||||
| -rw-r--r-- | src/routes/[lang=lang]/sections/hero.svelte | 75 | ||||
| -rw-r--r-- | src/routes/[lang=lang]/sections/products.svelte | 28 |
4 files changed, 198 insertions, 0 deletions
diff --git a/src/routes/[lang=lang]/sections/contact.svelte b/src/routes/[lang=lang]/sections/contact.svelte new file mode 100644 index 0000000..b058180 --- /dev/null +++ b/src/routes/[lang=lang]/sections/contact.svelte @@ -0,0 +1,69 @@ +<script context="module" lang="ts"> + export type ContactModel = { + addressLines: Array<string>; + email?: string; + phone?: string; + phoneHours?: string; + }; +</script> + +<script lang="ts"> + import LL from "$i18n/i18n-svelte"; + + export let model: ContactModel; + + let visible = true; + + $: if (!model.addressLines) { + visible = false; + } else { + visible = true; + } +</script> + +{#if visible} + <section class="contact relative z-1"> + <div class="w-[calc(100%_-_2.5rem)] lg:w-[calc(100%_-_4rem)] mx-auto max-w-7xl"> + <div class="mb-8 lg:mb-12"> + <h1 class="text-center">{$LL.contact.title()}</h1> + </div> + + <div class="grid grid-cols-12 gap-8 lg:gap-12"> + <div class="col-span-12 lg:col-span-6"> + <dl class="details-list details-list--rows"> + {#if (model.addressLines?.length ?? 0) > 0} + <div class="details-list__item py-5 lg:py-8 lg:flex lg:justify-between"> + <dt class="font-bold mb-1.5 lg:mb-2 lg:mb-0">{$LL.contact.addressTitle()}</dt> + <dd class="leading-snug lg:text-right"> + {#each model.addressLines as line} + {line}<br /> + {/each} + </dd> + </div> + {/if} + {#if model.email} + <div class="details-list__item py-5 lg:py-8 lg:flex lg:justify-between"> + <dt class="font-bold mb-1.5 lg:mb-2 lg:mb-0">{$LL.contact.emailTitle()}</dt> + <dd> + <a href="mailto:webmaster@example.com">{model.email}</a> + </dd> + </div> + {/if} + {#if model.phone} + <div class="details-list__item py-5 lg:py-8 lg:flex lg:justify-between"> + <dt class="font-bold mb-1.5 lg:mb-2 lg:mb-0">{$LL.contact.phoneTitle()}</dt> + <dd class="leading-snug lg:text-right"> + <p><a href="tel:+44 7656 6455">{model.phone}</a></p> + {#if model.phoneHours} + <p class="text-contrast-medium">{model.phoneHours}</p> + {/if} + </dd> + </div> + {/if} + </dl> + </div> + <div class="rounded col-span-12 lg:col-span-6 lg:h-auto lg:pb-0" /> + </div> + </div> + </section> +{/if} diff --git a/src/routes/[lang=lang]/sections/description.svelte b/src/routes/[lang=lang]/sections/description.svelte new file mode 100644 index 0000000..79a3939 --- /dev/null +++ b/src/routes/[lang=lang]/sections/description.svelte @@ -0,0 +1,26 @@ +<script context="module" lang="ts"> + export type DescriptionModel = { + title: string; + content?: any; + }; +</script> + +<script lang="ts"> + import { PortableText } from "@portabletext/svelte"; + export let model: DescriptionModel; + + let visible = true; + + $: if (!model.title) { + visible = false; + } else { + visible = true; + } +</script> + +{#if visible} + <h3>{model.title}</h3> + {#if model.content} + <PortableText value={model.content} /> + {/if} +{/if} diff --git a/src/routes/[lang=lang]/sections/hero.svelte b/src/routes/[lang=lang]/sections/hero.svelte new file mode 100644 index 0000000..3cdf221 --- /dev/null +++ b/src/routes/[lang=lang]/sections/hero.svelte @@ -0,0 +1,75 @@ +<script context="module" lang="ts"> + export type HeroModel = { + title: string; + content?: any; + }; +</script> + +<script lang="ts"> + import { PortableText } from "@portabletext/svelte"; + export let model: HeroModel; + + let visible = true; + + $: if (!model.title) { + visible = false; + } else { + visible = true; + } +</script> + +{#if visible} + <section class="has-section-divider-bottom bg-contrast-low/50"> + <div class="py-20 lg:py-32"> + <div class="w-[calc(100%_-_2.5rem)] lg:w-[calc(100%_-_4rem)] mx-auto max-w-lg md:max-w-3xl"> + <div class="text-component"> + <h1>{model.title}</h1> + {#if model.content} + <PortableText value={model.content} /> + {/if} + </div> + </div> + </div> + + <div class="section-divider"> + <svg viewBox="0 0 1920 60" aria-hidden="true"> + <path + class="fill-floor" + d="M-153.5,85.5a4002.033,4002.033,0,0,1,658-71c262.854-6.5,431.675,15.372,600,27,257.356,17.779,624.828,19.31,1089-58v102Z" + /> + </svg> + </div> + </section> +{/if} + +<style lang="postcss"> + :root { + --section-divider-width: 1920; + --section-divider-height: 60; + --section-divider-ratio: calc(100% * var(--section-divider-height) / var(--section-divider-width)); + } + + [class*="has-section-divider"] { + position: relative; + } + + .has-section-divider-bottom { + padding-bottom: var(--section-divider-ratio); + } + + .section-divider { + position: absolute; + bottom: -1px; + left: 0; + width: 100%; + overflow: hidden; + } + .section-divider svg { + position: relative; + display: block; + height: auto; + max-width: none; + width: 102%; + left: -1%; + } +</style> diff --git a/src/routes/[lang=lang]/sections/products.svelte b/src/routes/[lang=lang]/sections/products.svelte new file mode 100644 index 0000000..4e10b6f --- /dev/null +++ b/src/routes/[lang=lang]/sections/products.svelte @@ -0,0 +1,28 @@ +<script context="module" lang="ts"> + export type ProductsModel = { + products: ProductModel[]; + }; + + export type ProductModel = { + title: string; + duration: string; + cost: string; + description: string; + orderLink: string; + }; +</script> + +<script lang="ts"> + export let model: ProductsModel; + + let visible = true; + $: if (!model.products || !model.products.length) { + visible = false; + } else { + visible = true; + } +</script> + +{#if visible} + +{/if}
\ No newline at end of file |